<template>
    <!-- 待审批详情-->
    <div id="stayApprovalDetails">

         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <h2>【郑州市第八中学白云山研学旅行的申请】</h2>
                    <el-form-item label="学校名称" prop="name">
                        <el-input class="sPAInput sPAItem"  v-model="ruleForm.name" :disabled="isShow"></el-input>
                    </el-form-item>

                    <el-form-item label="出行名称" prop="name">
                        <el-input class="sPAInput sPAItem" v-model="ruleForm.name" :disabled="isShow"></el-input>
                    </el-form-item>

                    <el-form-item label="出行人员" prop="name">
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                    </el-form-item>

                    <el-form-item label="" prop="name">
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                    </el-form-item>

                    <el-form-item label="出行日期">
                        <el-form-item label="出行时间" class="sPAItemPlus">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" :disabled="isShow"></el-date-picker>
                            </el-col>
                            <el-col :span="11">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" :disabled="isShow"></el-time-picker>
                            </el-col>
                        </el-form-item>
                        <br/>
                        <el-form-item label="返回时间" class="sPAItemPlus">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" :disabled="isShow"></el-date-picker>
                            </el-col>
                            <el-col :span="11">
                                <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" :disabled="isShow"></el-time-picker>
                            </el-col>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item label="出行目的地">
                        <el-form-item label="目的地-1" class="sPAItemPlus">
                            <el-select class="sPAInputPlus" v-model="ruleForm.region" :disabled="isShow" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                            <el-select class="sPAInputPlus" v-model="ruleForm.region" :disabled="isShow" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                            <el-select class="sPASelect" v-model="ruleForm.region" :disabled="isShow" placeholder="请选择活动区域">
                                <el-option label="白云山研学基地" value="shanghai"></el-option>
                                <el-option label="白云山研学基地" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item label="带队老师" prop="name">
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                    </el-form-item>

                    <el-form-item label="车辆安排">
                        <el-form-item label="出行车辆" class="sPAItemPlus">
                            <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                            <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                            <el-input class="sPAInputPlus" v-model="ruleForm.name" :disabled="isShow"></el-input>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item label="出行介绍">
                        <el-input type="textarea" class="sPAItem"
                                  :autosize="{ minRows: 8, maxRows: 4}" style="width: 97%" :disabled="isShow" v-model="ruleForm.name"></el-input>
                    </el-form-item>

                    <el-form-item label="审核单位">
                        <el-select class="sPAItem" v-model="ruleForm.region" :disabled="isShow" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input type="textarea" class="sPAItem" style="width: 30%"
                                  :autosize="{ minRows: 4, maxRows: 4}" placeholder="审核建议" v-model="ruleForm.desc"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button class="sPAItem" type="primary" @click="submitForm('ruleForm')">通过</el-button>
                        <el-button @click="resetForm('ruleForm')">拒绝</el-button>
                    </el-form-item>
                </el-form>

    </div>
</template>

<script>

    import {Button,Form,FormItem,Input,Col,DatePicker,TimePicker,Select,Option} from "element-ui";
    //import Buttons from "../../buttons/Buttons";

    export default {
        name: "StayApprovalDetails",
        data(){
          return{
              isShow:true
              ,
              ruleForm:{
                  name:''
              },
              rules:{

              }
          }
        },
        methods:{
            submitForm(){

            },
            resetForm(){

            }
        },
        components:{
            'el-button':Button,
            'el-form':Form,
            'el-form-item':FormItem,
            'el-input':Input,
            'el-col':Col,
            'el-time-picker':TimePicker,
            'el-date-picker':DatePicker,
            'el-select':Select,
            'el-option':Option
        }
    }
</script>

<style scoped>

    .demo-ruleForm{
        width: 80%;
    }

    .sPAItem{
        margin-left: 3%;
    }

    .sPAInput{
        width: 55%;
    }

    .sPAButton{
        margin-left: 0%;
    }

    h2{
        font-size: 1.5rem;
        margin-top: 3%;
        margin-bottom: 2%;
        position: relative;
        right: 1%;
    }

    .sPAInputPlus:nth-child(1){
        margin-left: 3%;
    }

    .sPAInputPlus{
        width: 17%;
        float: left;
        margin-left: 2%;
    }

    .sPAItemPlus{
        position:relative;
        right: 1%;
    }

    .sPASelect{
        width: 25%;
        margin-left: 2%;
    }

</style>
